<!--展示群聊人员 -->
<template>
	<div class="contact">
		<div class="staff">
			<div class="staffRList" :class="isshowstafficon ? 'staffRListall':''">
				<div class="staffRListblock flex">
					<div class="loadingicon" v-if="isloadingicon" style="height:20px;text-align:center;"><span
							class="el-icon-loading" style="font-size:22px;"></span></div>
					<div class="staffRitem" v-for="(item,index) in friendData" :key="index" v-if="isshowstafficon ? index < friendData.length : index < 10">
						<div class="staffRitem-img marginAuto">
							<img v-if="!item.avatar" src="@/assets/logosvg.png" alt="" />
							<img v-if="item.avatar" :src="item.avatar" alt="" />
						</div>
						<div class="staffRitem-name marginAuto ellipsis01">{{ item.realname || '小豫' }}</div>
					</div>
					<div class="staffRitem curpoin" @click="isaddfri=true;addfritxt=''">
						<div class="staffRitem-fun staffRitem-img marginAuto flex">
							<span class="el-icon-plus marginAuto"></span>
						</div>
						<div class="staffRitem-name marginAuto ellipsis01 mainColor">添加</div>
					</div>
					<div class="staffRitem curpoin" v-if="roleId == 3" @click="isremovefri=true">
						<div class="staffRitem-fun staffRitem-img marginAuto flex">
							<span class="el-icon-minus marginAuto"></span>
						</div>
						<div class="staffRitem-name marginAuto ellipsis01 mainColor">移除</div>
					</div>
				</div>
			</div>
			<div class="staffRListAll curpoin" @click="isshowstafficon = !isshowstafficon" v-if="friendData.length > 10">
				<span class="mainColor" style="margin-right:5px;">{{ isshowstafficon  ?  '收起':'展开'}}</span>
				<span class="mainColor el-icon-arrow-down" :class="isshowstafficon ? 'staffRListAllicon':''"></span>
			</div>
			<div class="staffTitle" style="margin-top:40px;" v-if="roleId == 3">
				<div class="staffTitle-edit curpoin" @click="opengroupnamefun()">
					<img src="@/assets/chat/edit.png" alt="编辑">
				</div>
				<div class="staffTitle-title">群聊名称</div>
				<div class="staffTitlemsg ellipsis01">{{ groupname }}</div>
			</div>
			<div class="staffNotice" v-if="roleId == 3">
				<div class="staffTitle-title">订单名称</div>
				<div class="staffTitlemsg ellipsis01">{{ staffmsgdata.order_name }}</div>
			</div>
			<div class="staffNotice" v-if="roleId == 3">
				<div class="staffTitle-edit curpoin" @click="isnotice = true">
					<img src="@/assets/chat/edit.png" alt="编辑">
				</div>
				<div class="staffTitle-title">群公告</div>
				<div class="staffTitlemsg ellipsis01">{{ staffmsgdata.notice }}</div>
			</div>
			<div class="staffFun" v-if="roleId == 3">
				<!-- <div class="staffFuneach curpoin" style="color:#222222;margin:0;">清空聊天记录</div>
				<div class="staffFuneach curpoin" style="color:#FF0000;">退出</div> -->
				<div class="staffFuneach curpoin mainColor" @click="isdismiss=true">解散群</div>
			</div>
		</div>
		<el-dialog :modal="true" title="修改群名称" :visible.sync="isgroupname" width="432px" top="100px"
			:before-close="CloseDiafun" :modal-append-to-body="false">
			<div class="groupnisblock">
				<div class="groupnis">
					<textarea class="groupnistxt" v-model="groupnameinput" placeholder="请输入群名称" maxlength="30"></textarea>
				</div>
				<div class="replacebtn">
					<el-button class="replacebtneach" style="background-color:#999999;"
						@click="isgroupname=false">取消</el-button>
					<el-button class="replacebtneach mainbg" @click="isgroupnamefun()">确定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog :modal="true" title="群公告" :visible.sync="isnotice" width="432px" top="100px"
			:before-close="CloseDiafun" :modal-append-to-body="false">
			<div class="groupnisblock" style="padding:0 0 30px;">
				<div class="groupnis">
					<textarea class="groupnistxt" v-model="noticetxt" placeholder="请输入群公告" maxlength="500" style="height:200px;"></textarea>
				</div>
				<div class="replacebtn">
					<el-button class="replacebtneach" style="background-color:#999999;"
						@click="isnotice=false">取消</el-button>
					<el-button class="replacebtneach mainbg" @click="noticefun()">确定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog :modal="true" title="添加群人员" :visible.sync="isaddfri" width="432px" top="100px"
			:before-close="CloseDiafun" :modal-append-to-body="false">
			<div class="groupnisblock">
				<div class="groupnis flex">
					<textarea class="groupnistxt" v-model="addfritxt" placeholder="请输入手机号"></textarea>
					<!-- <div class="groupnisbtn mainbg baiColor">搜索</div> -->
				</div>
				<div class="replacebtn">
					<el-button class="replacebtneach" style="background-color:#999999;" @click="isaddfri=false">取消</el-button>
					<el-button class="replacebtneach mainbg" @click="isaddfrifun()">确定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog id="removefriDia" :modal="true" title="" :visible.sync="isremovefri" width="640px" top="100px"
			:before-close="CloseDiafun" :modal-append-to-body="false">
			<div class="removefri flex">
				<div class="removefril">
					<!-- <div class="removefril-input" id="removesearch-input">
						<el-input class="removesearch-input" @change="" v-model="removesearchtxt"
							prefix-icon="el-icon-search" placeholder="搜索"></el-input>
					</div> -->
					<div class="removefril-list">
						<div class="removefril-item flex curpoin" 
						v-for="(item,index) in friendData" :key="index" 
						v-if="UserInfo.user_id != item.user_id"
						@click="removefrilseFun(item,index)">
							<div class="removefril-sele" >
								<span class="el-icon-success" :class="item.delitem ? 'mainColor':''"></span>
							</div>
							<div class="removefril-photo">
								<img v-if="!item.avatar" src="@/assets/logosvg.png" alt="" />
								<img v-if="item.avatar" :src="item.avatar" alt="" />
							</div>
							<div class="removefril-name ellipsis01">{{ item.realname || '小豫' }}</div>
						</div>
					</div>
				</div>
				<div class="removefrir">
					<div class="removefrirt flex">
						<div class="removefrirTitle">删除成员</div>
						<div class="removefrirnum">已选择了{{ removefrilselist.length }}个联系人</div>
					</div>
					<div class="removefrirb flex">
						<div class="removefrirb-item" v-for="(item,index) in removefrilselist" :key="index">
							<div class="removefrirb-photo marginAuto">
								<span class="removefrirb-photoclose curpoin el-icon-error" @click="removefrilseFun(item,index)"></span>
								<img v-if="!item.avatar" src="@/assets/logosvg.png" alt="" />
								<img v-if="item.avatar" :src="item.avatar" alt="" />
							</div>
							<div class="removefrirb-title ellipsis01">{{ item.realname || '小豫' }}</div>
						</div>
					</div>
					<div class="replacebtn" style="margin:0;">
						<el-button class="replacebtneach" style="background-color:#999999;"
							@click="isremovefri=false">取消</el-button>
						<el-button class="replacebtneach mainbg" @click="removefridelfun()">删除</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
		<el-dialog :modal="true" title="" :visible.sync="isEnterDelFri" width="432px" top="100px"
			:before-close="CloseDiafun" :modal-append-to-body="false">
			<div class="groupnisblock">
				<div class="groupnis" style="background-color:#fff;">
					确认要删除此成员吗？
				</div>
				<div class="replacebtn">
					<el-button class="replacebtneach" style="background-color:#999999;"
						@click="isEnterDelFri=false">取消</el-button>
					<el-button class="replacebtneach mainbg" @click="removefridelEnterfun">确定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog :modal="true" title="" :visible.sync="isdismiss" width="432px" top="100px"
			:before-close="CloseDiafun" :modal-append-to-body="false">
			<div class="groupnisblock">
				<div class="groupnis" style="background-color:#fff;">
					确认要解散该群聊吗？
				</div>
				<div class="replacebtn">
					<el-button class="replacebtneach" style="background-color:#999999;"
						@click="isdismiss=false">取消</el-button>
					<el-button class="replacebtneach mainbg" @click="dissolveGroup">确定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<style scoped lang="scss">
	
</style>
<script>
	export default {
		props:['chatsign','infodataacitem'],
		data(){
			return {
				UserInfo:{},
				roleId:'',
				staffmsgdata:{},
				isloadingicon:false,
				isshowstafficon:false, // 展开好友
				friendData:[],
				isgroupname:false,  // 编辑群昵称
				groupname:'',
				groupnameinput:'',
				isnotice:false,  // 公告
				noticetxt:'',
				isaddfri:false,  // 添加群好友
				addfritxt:'',
				isremovefri:false,  // 移除群好友
				removesearchtxt:'',
				removefrilselist:[],
				isEnterDelFri:false,
				isdismiss:false,  // 解散群聊
			}
		},
		mounted(){
			this.UserInfo = this.$store.state.UserInfo;
			this.roleId = this.$store.state.roleId;
			this.getfriendfun();
			this.getstaffmsg()
		},
		methods:{
			dissolveGroup(){  // 解散群聊
				let sendData = {
					chat_sign:this.chatsign
				}
				this.apifun.$post('/group/group/dissolveGroup', sendData).then((res) => {
					this.isloadingicon=false;
					this.isdismiss=false;  // 解散群聊
					if(res.code == 200){
						let datas = res.data;
						this.$emit('getfriend')
					}
				})
			},
			// ------
			getfriendfun(){  // 获取群好友
				let sendData = {
					chat_sign:this.chatsign
				};
				this.isloadingicon=true;
				this.apifun.$post('/group/group/groupUserArr', sendData).then((res) => {
					this.isloadingicon=false;
					// console.log(res)
					if(res.code == 200){
						let datas = res.data;
						this.$emit('groupuserdata',datas);
						this.friendData = datas
					}
				})
			},
			opengroupnamefun(){ // 打开修改群昵称
				this.isgroupname = true;
				this.groupnameinput = this.groupname;
			},
			isgroupnamefun(){  //  修改群昵称
				let sendData = {
					chat_sign:this.chatsign,
					title:this.groupnameinput
				};
				if(this.groupnameinput == ''){
					this.$message({
					  message: '群名称不得为空',
					  type: 'warning'
					});
					return false
				};
				this.apifun.$post('/group/group/modifyGroupTitle', sendData).then((res) => {
					// console.log(res)
					if(res.code == 200){
						this.isgroupname=false;
						this.groupname = this.groupnameinput
					}
				})
			},
			noticefun(){  // 编辑群公告信息
				let sendData = {
					chat_sign:this.chatsign,
					notice:this.noticetxt
				};
				if(this.noticetxt == ''){
					this.$message({
					  message: '群公告不得为空',
					  type: 'warning'
					});
					return false
				};
				this.apifun.$post('/group/group/modifyGroupNotice', sendData).then((res) => {
					console.log(res)
					if(res.code == 200){
						this.isnotice=false;
						this.staffmsgdata.notice = this.noticetxt;
					}
				})
			},
			isaddfrifun(){  // 添加群成员
				let sendData = {
					chat_sign:this.chatsign,
					mobile:this.addfritxt
				}
				this.apifun.$post('/group/group/joinGroup', sendData).then((res) => {
					if(res.code == 200){
						let datas = res.data;
						this.isaddfri = false;
						this.getfriendfun();
					}
				})
			},
			// -------------删除群成员系列
			removefridelfun(){  // 删除群成员
				let uids = [];
				this.removefrilselist.forEach((item,index)=>{
					uids.push(item.user_id)
				});
				if(uids.length <= 0){
					this.$message({
					  message: '请选择移除成员',
					  type: 'warning'
					});
					return false
				}
				this.isEnterDelFri = true;
			},
			removefridelEnterfun(){  // 删除群成员2此确认
				let uids = [];
				this.removefrilselist.forEach((item,index)=>{
					uids.push(item.user_id)
				});
				let sendData = {
					chat_sign:this.chatsign,
					uids:uids
				};
				this.apifun.$post('/group/group/kickOutGroup', sendData).then((res) => {
					// console.log(res)
					if(res.code == 200){
						let datas = res.data;
						this.isremovefri=false;
						this.isEnterDelFri = false;
						this.getfriendfun();
					}
				})
			},
			removefrilseFun(item,index){  // 选择删除的好友
				if(item.delitem){
					this.$set(item,'delitem',false);
				}else{
					this.$set(item,'delitem',true);
				}
				this.removefrilselistfun();
			},
			removefrilselistfun(){  // 筛选
				let fridata = [];
				this.friendData.forEach((item,index)=>{
					if(item.delitem){
						fridata.push(item)
					}
				})
				this.removefrilselist = fridata;
			},
			getstaffmsg(){  // 获取群聊信息
				let sendData = {
					chat_sign:this.chatsign,
				}
				this.apifun.$post('/group/group/getGroupInfo', sendData).then((res) => {
					if(res.code == 200){
						let datas = res.data;
						this.staffmsgdata = datas;
						this.noticetxt = datas.notice;
						if(datas.title == ''){
							this.groupname = this.groupnameinput = datas.order_name;
						}else{
							this.groupname = this.groupnameinput = datas.title;
						}
						
					}
				})
			},
			CloseDiafun(){
				this.isgroupname = false;
				this.isnotice = false;
				this.isaddfri = false;
				this.isremovefri = false;
				this.isEnterDelFri = false;
				this.isdismiss = false;
			}
		}
	}
</script>
<style>
	/* 弹窗去去掉右上角x */
	#removefriDia .el-icon-close:before{
		content: "" !important;
	}
	/* 移除好友搜索框 */
	#removesearch-input .el-input__inner {
		background-color: #FFF6F1;
		height: 36px;
		line-height: 36px;
	}
	
	#removesearch-input .el-input__inner:focus {
		border-color: #FF5E03;
	}
</style>
<style scoped lang="scss">
	.staff {
		width: 270px;
		height: 91vh;
		overflow-y: auto;
		border-bottom-right-radius: 10px;
		background-color: var(--bgColor);
	}
	.staff::-webkit-scrollbar {
	  width: 10px; /* 设置纵向滚动条宽度 */
	  height:15px;
	}
	// 群好友列表
	.staffRListall{
		height:auto !important;
	}
	.staffRList{
		height:260px;
		overflow:hidden;
		.staffRListblock{
			flex: 1;
			flex-wrap:wrap;
			margin:20px 10px 0px;
			.staffRitem{
				width: 25%;
				margin-bottom: 10px;
				
				.staffRitem-img{
					width: 40px;
					height: 40px;
					img{
						width:100%;
						height:100%;
						border-radius:5px;
					}
				}
				.staffRitem-fun{
					border: 1px solid #FF5E03;
					border-radius: 5px;
					color:#FF5E03;
					font-size: 20px;
				}
				.staffRitem-name{
					width: 95%;
					color: #333333;
					font-size: 12px;
					line-height:30px;
					text-align: center;
				}
			}
		}
	}
	// 展开
	.staffRListAll{
		width:100%;
		height: 20px;
		line-height: 20px;
		text-align: center;
		.staffRListAllicon{
			transform: rotate(180deg);
		}
	}
	// 群聊名称 - 群公告
	.staffTitle,.staffNotice{
		position: relative;
		flex: 1;
		margin:30px 10px;
		.staffTitle-edit{
			position: absolute;
			right: 10px;
			width: 16px;
			height: 16px;
			img{
				width:16px;
			}
		}
		.staffTitle-title{
			font-size: 14px;
			color: #222222;
		}
		.staffTitlemsg{
			font-size: 14px;
			color: #666666;
			margin-top:10px;
		}
	}
	// 功能
	.staffFun{
		padding: 20px 0;
		.staffFuneach{
			margin-top:30px;
			text-align: center;
			font-size:14px;
			color: #222222;
		}
	}
	// 弹窗
	// --修改群名称
	.groupnisblock{
		padding:30px 0;
		.groupnis {
			position: relative;
			width: 94%;
			padding: 2px 3%;
			border-radius: 5px;
			background-color:#F6F6F6;
			.groupnisbtn{
				position: absolute;
				right: 0px;
				width: 70px;
				height:40px;
				line-height: 40px;
				text-align: center;
				border-radius: 5px;
			}
			.groupnistxt {
				width: 100%;
				height:40px;
				border-radius: 5px;
				border: none;
				outline: none;
				resize: none;
				line-height:40px;
				background-color:#F6F6F6;
				color: #333;
				font-size: 14px;
			}
		}
	}
	// 移除群好友
	.removefri{
		width:600px;
		height: 370px;
		background-color: #fff;
		.removefril{
			width: 270px;
			height: 370px;
			overflow-y: auto;
			border-right: 1px solid #F6F6F6;
			.removefril-input{
				width: 80%;
			}
			.removefril-list{
				margin-top: 15px;
				.removefril-item{
					margin-bottom: 15px;
					.removefril-sele{
						width:20px;
						line-height: 40px;
						font-size:20px;
						color:#CDCECD;
					}
					.removefril-photo{
						width: 40px;
						margin: 0 10px;
						img{
							width:40px;
							height: 40px;
							border-radius:5px;
						}
					}
					.removefril-name{
						width: 50%;
						font-size: 14px;
						color: #333333;
						line-height: 40px;
					}
				}
			}
		}
		.removefrir{
			flex: 1;
			.removefrirt{
				justify-content: space-between;
				height: 40px;
				line-height: 40px;
				.removefrirTitle{
					font-size: 16px;
					color: #333;
					font-weight: 600;
				}
				.removefrirnum{
					font-size: 14px;
					color: #999999;
				}
			}
			.removefrirb{
				flex-wrap: wrap;
				margin-top:10px;
				height:210px;
				margin-bottom:40px;
				overflow-y: auto;
				.removefrirb-item{
					width:60px;
					margin-bottom:15px;
					.removefrirb-photo{
						position: relative;
						width: 40px;
						.removefrirb-photoclose{
							position: absolute;
							right:-10px;
							top: 0;
							font-size: 20px;
							color: #999999;
						}
						img{
							width: 40px;
							height: 40px;
							border-radius: 5px;
						}
					}
					.removefrirb-title{
						width:60px;
						text-align: center;
						font-size: 14px;
						color: #333333;
					}
				}
			}
		}
	}
	// 弹窗按钮
	.replacebtn {
		margin-top: 30px;
		display: flex;
		justify-content: flex-end;
	
		.replacebtneach {
			width: 130px;
			height: 50px;
			text-align: center;
			border-radius: 10px;
			color: #fff;
			font-size: 16px;
			margin-left: 25px;
		}
	}
	
</style>